<template>
  <q-dialog v-model="visible"
  :persistent="invalid">
    <q-card style="min-width: 300px" class="overflow-hidden">
      <get-current-posture ref="getCurrentPosture" v-model="posture"/>
      <q-card-section class="flex items-center q-gutter-x-sm">
        <div class="text-h6">
          {{ modify? posture.name + '姿态修改': '新增' }}
          <span v-if="!modify">{{postureTypes[posture.type]}}</span>
        </div>
        <q-space/>
        <q-btn v-if="modify" color="negative" @click="postureDelete" label="删除" icon="delete"/>
        <q-btn color="primary" @click="moveToPosture(posture.id)" icon="precision_manufacturing"
               v-if="connected && modify" label="移动"/>
        <q-btn color="primary" outline @click="getCurrentPosture.show()" icon="precision_manufacturing"
               v-if="connected" label="获取当前"/>
        <q-btn v-if="!modify" color="negative" @click="giveUpCreate" label="放弃新增" icon="delete" v-close-popup/>
      </q-card-section>
      <q-separator/>
      <q-card-section class="q-gutter-y-sm">
        <div class="row q-gutter-x-sm">
          <q-input readonly dense outlined v-model="posture.id" class="col" label="id"/>
          <q-input dense outlined v-model="posture.frameID" class="col" label="frameID"/>
          <q-input dense outlined v-model="posture.name" class="col" label="名称"/>
        </div>
        <q-separator/>
        <q-item-label class="text-subtitle1 text-grey-8">位置信息</q-item-label>
        <div class="row q-gutter-x-sm">
          <q-input dense outlined type="number" v-model="posture.x" class="col" label="X"/>
          <q-input dense outlined type="number" v-model="posture.y" class="col" label="Y"/>
          <q-input dense outlined type="number" v-model="posture.z" class="col" label="Z"/>
        </div>
        <q-separator/>
        <q-item-label class="text-subtitle1 text-grey-7">角度信息</q-item-label>
        <div class="row q-gutter-x-sm">
          <q-input dense outlined type="number" v-model="posture.qx" class="col" label="X"/>
          <q-input dense outlined type="number" v-model="posture.qy" class="col" label="Y"/>
          <q-input dense outlined type="number" v-model="posture.qz" class="col" label="Z"/>
          <q-input dense outlined type="number" v-model="posture.qw" class="col" label="W"/>
        </div>
      </q-card-section>
      <q-slide-transition>
        <div v-if="!invalid">
          <q-btn class="full-width" stretch :label="modify?'确认修改':'确认新增'" icon="check" color="primary" v-close-popup/>
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { computed, inject, ref } from 'vue'
import { useQuasar } from 'quasar'
import { api } from 'boot/axios.js'
import { useAPIStore } from 'stores/api/index.js'
import GetCurrentPosture from 'components/transport/catch/storage/GetCurrentPosture.vue'

const postureTypes = {
  reference: '参考姿态',
  home: '准备姿态',
  calibration: '校准姿态',
  normal: '过渡姿态'
}

export default {
  name: 'ModifyStoragePosture',
  components: { GetCurrentPosture },
  props: {
    modify: { type: Boolean, default: false }
  },
  setup (props, context) {
    const $q = useQuasar()
    const visible = ref(false)
    const posture = ref({})

    return {
      visible,
      posture,
      getCurrentPosture: ref(),
      postureTypes,
      connected: inject('connected'),
      show (data) {
        posture.value = data
        visible.value = true
      },
      invalid: computed(() =>
        !posture.value.name ||
        !(posture.value.x || posture.value.y || posture.value.z || posture.value.qx || posture.value.qy || posture.value.qz || posture.value.qw)
      ),
      moveToPosture (id) {
        api.get(useAPIStore().amrUrl + 'add', { params: { type: 'posture', content: id } }).then(rs => {
          if (rs.data === 'done') {
            $q.notify({
              type: 'positive',
              message: '指令已下发',
              position: 'bottom'
            })
          }
        }).catch(() => {
          $q.notify({
            type: 'negative',
            message: '接口调用出现错误',
            position: 'bottom'
          })
        })
      },
      postureDelete () {
        $q.dialog({
          title: '删除' + posture.value.name + '姿态？',
          message: '是否要删除该姿态？',
          cancel: '取消',
          ok: '确认'
        }).onOk(() => {
          context.emit('remove', posture.value)
          visible.value = false
        })
      },
      giveUpCreate () {
        context.emit('remove', posture.value)
        visible.value = false
      }
    }
  }
}
</script>
